<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
  <title>王者荣耀主页</title>
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/page_top.css">
  <link rel="stylesheet" href="css/page_heder.css">
  <link rel="stylesheet" href="css/page_main_news.css">
  <link rel="stylesheet" href="css/page_main_entrance.css">
  <link rel="stylesheet" href="css/page_main_content.css">
  <style>
    .main {
      background: url(./img/main_bg.jpeg) no-repeat center top/100% auto;
    }

    .main .link {
      display: block;
      width: 1200px;
      height: 440px;
      margin: 8px auto 12px;
    }
  </style>
</head>
<body>
  <div class="top">
    <div class="top_wrapper area">
      <div class="left-area">
        <div class="logo">
          <a href="#">腾讯游戏</a>
        </div>
        <div class="recommend">
          <img src="./img/recommend_img.jpeg" alt="">
        </div>
      </div>
      <ul class="right-area">
        <li class="item">
          <a class="growth" href="#">
            <i class="icon-grow"></i>
            成长守护平台
          </a>
        </li>
        <li class="item">
          <a class="ranking" href="#">腾讯游戏排行榜</a> 
        </li>
      </ul>
    </div>
  </div>

  <div class="main">
    <div class="header">
      <div class="area header_wrapper">
        <div class="left-area">
          <h1 class="logo">
            <a href="#">王者荣耀</a>
          </h1>
          <ul class="nav-list">
            <li class="item">
              <a href="#">
                游戏资料
                <span class="desc">DATA</span>
              </a>
            </li>
            <li class="item">
              <a href="#">
                内容中心
                <span class="desc">CONTENTS</span>
              </a>
            </li>
            <li class="item">
              <a href="#">
                赛事中心
                <span class="desc">MATCH</span>
              </a>
            </li>
            <li class="item">
              <a href="#">
                百态王者
                <span class="desc">CULTURE</span>
              </a>
            </li>
            <li class="item">
              <a href="#">
                社区互动
                <span class="desc">COMMUNITY</span>
              </a>
            </li>
            <li class="item">
              <a href="#">
                玩家支持
                <span class="desc">PLAYER</span>
              </a>
            </li>
            <li class="item">
              <a href="#">
                IP新游
                <span class="desc">NEW GAMES</span>
              </a>
            </li>
          </ul>
          <div class="search">
            <a href="#"></a>
          </div>
        </div>
        <div class="right-area">
          <div class="image">
            <img src="./img/header_login.png" alt="">
          </div>
          <div class="info">
            <a href="#">欢迎登录</a>
            <p>登录后查看游戏战绩</p>
          </div>
        </div>
      </div>
    </div>
    <a class="link" target="_blank" href="https://pvp.qq.com/cp/a20231227ymyl/"></a>
    <div class="main_wrapper">
      <div class="news-section">
        <div class="banner">
          <ul class="image-list">
            <li class="item">
              <a href="#">
                <img src="./img/banner1.jpeg" alt="">
              </a>
            </li>
            <li class="item">
              <a href="#">
                <img src="./img/banner2.jpeg" alt="">
              </a>
            </li>
            <li class="item">
              <a href="#">
                <img src="./img/banner3.jpeg" alt="">
              </a>
            </li>
            <li class="item">
              <a href="#">
                <img src="./img/banner4.jpeg" alt="">
              </a>
            </li>
            <li class="item">
              <a href="#">
                <img src="./img/banner5.jpeg" alt="">
              </a>
            </li>
          </ul>
          <ul class="title-list">
            <li class="item banner-title-list-active">
              <a class="" href="#">云梦区域站上线</a>
            </li>
            <li class="item">
              <a href="#">朵莉亚连招</a>
            </li>
            <li class="item">
              <a href="#">云中君英雄动画</a>
            </li>
            <li class="item">
              <a href="#">女子赛主题曲</a>
            </li>
            <li class="item">
              <a href="#">王者萌萌假日</a>
            </li>
          </ul>
        </div>
        <div class="news">
            <ul class="title-list">
              <li class="item ">
                <a class="title-list-item-active" href="#">热门</a>
              </li>
              <li class="item">
                <a href="#">新闻</a>
              </li>
              <li class="item">
                <a href="#">公告</a>
              </li>
              <li class="item">
                <a href="#">活动</a>
              </li>
              <li class="item">
                <a href="#">赛事</a>
              </li>
              <li class="item more">
                <a href="">...</a>
              </li>
            </ul>
            <p class="notice">
              <a href="#">源梦皮肤设计大赛创意赏析第二期</a>
            </p>
            <ul class="news-list">
              <li class="item">
                <a class="desc nowrap_ellipsis news_type news_type_hot" href="#">
                  源梦皮肤设计大赛投稿Q&A【创意赏析第一期】
                </a>
                <span class="date">04/19</span>
              </li>
            </ul>
        </div>
        <div class="download">
          <a class="download-bth" href="#"></a>
          <a class="guard-bth" href="#"></a>
          <a class="experience-bth" href="#"></a>
        </div>
      </div>
      <ul class="entrrance-section">
        <li class="item">
          <a href="#">
            <img src="./img/entrance1.jpeg" alt="">
          </a>
        </li>
        <li class="item">
          <a href="#">
            <img src="./img/entrance2.jpeg" alt="">
          </a>
        </li>
        <li class="item">
          <a href="#">
            <img src="./img/entrance3.png" alt="">
          </a>
        </li>
        <li class="item">
          <a href="#">
            <img src="./img/entrance4.png" alt="">
          </a>
        </li>
    </ul>

    <div class="section-content">
      <div class="left-content">
        <div class="content-center">
          <div class="section_header">
            <div class="header-left">
              <h3 class="title">内容中心</h3>
            </div>
            <div class="header-right">
              <a class="more" href="#">更多</a>
            </div>
          </div>
          <div class="tab_control">
            <div class="item tab_control-item-active">精品栏目</div>
            <div class="line"></div>
            <div class="item">精品赛事</div>
            <div class="line"></div>
            <div class="item">英雄攻略</div>
          </div>
          <div class="key_word">
            <div class="item">最新</div>
            <div class="item">马菠萝奇闻录</div>
            <div class="item">马菠萝奇</div>
            <div class="item">王者克纸轮</div>
            <div class="item">王者视角</div>
            <div class="item">峡谷460</div>
            <div class="item">百星王者带你非</div>
            <div class="item">王者克纸轮</div>
            <div class="item">王者视角</div>
            <div class="item">峡谷460</div>
            <div class="item">马菠萝奇闻录</div>
            <div class="item">马菠萝奇</div>
            <div class="item">王者克纸轮</div>
          </div>

          <div class="video_list">
            
          </div>

        </div>
        <div class="match-center">
          <div class="section_header">
            <div class="header-left">
              <h3 class="title title-icon-match">赛事中心</h3>
            </div>
            <div class="header-right">
              <a class="more" href="#">更多</a>
            </div>
          </div>
        </div>
      </div>
      
      
      <div class="right-content">

      </div>
    </div>
    </div>
  </div>

  <script>
    window.onload = function() {
      
      var bannerEl = document.querySelector(".banner")
      //轮播图
      var imageListEl = bannerEl.querySelector(".image-list")
      //轮播图下面的选项
      var bannerTitleListEl = bannerEl.querySelector(".title-list")
      var bannerTitleListActive = bannerTitleListEl.querySelector(".banner-title-list-active")
      var currentImageIndex = 0
      var previousIndex = 0
      var timerId = null

      bannerTitleListEl.onmouseover = function(event) {
        
        // bannerTitleListActive.classList.remove("banner-title-list-active")
        // event.target.classList.add("banner-title-list-active")
        // bannerTitleListActive = event.target
        var index = Array.from(bannerTitleListEl.children).findIndex(function(item) {
          return event.target.parentElement == item
        })
        previousIndex = currentImageIndex
        currentImageIndex = index
        swtchBanner()
      }
      //移除定时器
      bannerEl.onmouseenter = function () {
        clearInterval(timerId)
      }
      bannerEl.onmouseleave = function () {
        addTimer()
      }
      
      addTimer()
      //定时器
      function addTimer() {

        timerId = setInterval(() => {
          if (currentImageIndex >= bannerTitleListEl.children.length) {
            currentImageIndex = 0
          }
          //图片滚动
          swtchBanner()
          //文本滚动
          // bannerTitleListActive.classList.remove("banner-title-list-active")
          // bannerTitleListEl.children[currentImageIndex].classList.add("banner-title-list-active")
          // bannerTitleListActive = bannerTitleListEl.children[currentImageIndex]
          previousIndex = currentImageIndex
          currentImageIndex++
        }, 1000);
      }
      
      function swtchBanner() {
        
        for (var i = 0; i < imageListEl.children.length; i++) {
          
          var itemEl = imageListEl.children[i]
          if (i === currentImageIndex) {
            itemEl.style.transition = "left 300ms ease"
            itemEl.style.left = "0"
          } else if (i < currentImageIndex) {
            if (i !== previousIndex) {
              itemEl.style.transition = "none"
            }
            itemEl.style.left = "-100%"
          } else {
            if (i !== previousIndex) {
              itemEl.style.transition = "none"
            }
            itemEl.style.left = "100%"
          } 
        }

           bannerTitleListActive.classList.remove("banner-title-list-active")
          bannerTitleListEl.children[currentImageIndex].classList.add("banner-title-list-active")
          bannerTitleListActive = bannerTitleListEl.children[currentImageIndex]
      }


     //新闻tab
      var newsEl =  document.querySelector(".news")
      var title_list = newsEl.querySelector(".title-list")
      var title_list_item_active = document.querySelector(".title-list-item-active")

      title_list.onmouseover = function(event) {
          
        if (event.target.parentElement.classList.contains("more")) {
          return
        }
        if (title_list_item_active) {
          title_list_item_active.classList.remove("title-list-item-active")
        }

        var aEl = event.target
        aEl.classList.add("title-list-item-active")        
        title_list_item_active = aEl
      }


      //内容中心tab
      var tab_control = document.querySelector(".tab_control")
      var tab_control_item_active = document.querySelector(".tab_control-item-active")

      tab_control.onmouseover = function(event) {
        
        if (tab_control_item_active) {
          tab_control_item_active.classList.remove("tab_control-item-active")
        }
        event.target.classList.add("tab_control-item-active")
        tab_control_item_active = event.target
      }

    }
  </script>
</body>
</html>